<template>
  <div>
    <h1>Parent</h1>

    <Child :persons="persons">
      <template #link>
        <a href="###">hello</a>
      </template>

      <template #content>
        <span>world</span>
      </template>

      <!-- 
        obj接受的是组件内部传递过来的所有数据组成的对象

       -->
      <!-- <template #personMessage="obj">
        <p :style="{ background: obj.person.age > 18 ? 'red' : '' }">
          {{ obj.person.name }}--{{ obj.person.age }}
        </p>
      </template> -->

      <template #personMessage="{ person }">
        <p :style="{ background: person.age > 18 ? 'red' : '' }">
          {{ person.name }}--{{ person.age }}
        </p>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",
  data() {
    return {
      persons: [
        { id: "001", name: "李博", age: 30 },
        { id: "002", name: "red青", age: 14 },
        { id: "003", name: "(个_个)", age: 24 },
        { id: "004", name: "lucy", age: 55 },
        { id: "005", name: "lily", age: 4 },
        { id: "006", name: "liming", age: 19 },
      ],
    };
  },
  components: {
    Child,
  },
};
</script>

<style></style>
